<template>
  <div class="page-container">
    <div class="l-box">
      <!-- 首页机构/渠道/账号 续费功能. -->

      <accountRenewal v-if="userDateInfoData"></accountRenewal>
      <!-- 快捷入口组件 -->
      <fastmenu></fastmenu>
      <!-- 统计组件 -->
      <statistics
        :tabs="tabData.tabList"
        :echartsTabs="tabData.tabs"
      ></statistics>
      <!-- z暂时屏蔽 -->
      <div class="page-row-wrap row-ua" style="display: none">
        <!-- 系统更新模块-暂时关掉，功能已经完成 -->
        <updateLog :systemUpdateTabs="tabData.systemUpdateTabs"></updateLog>
        <!-- 应用市场 -->
        <armlTab :armlTabs="tabData.armlTabs"></armlTab>
      </div>
    </div>
    <div class="r-box">
      <!-- 轮播图--没内容暂时屏蔽 -->
      <!-- <advertisement></advertisement> -->
      <!-- 帮助中心 -->
      <helpCenter></helpCenter>
    </div>
  </div>
</template>

<script lang="tsx" setup>
let userDateInfoData = localStorage.getItem('userDateInfo') || '';
import { ref, onMounted } from 'vue';
import dashboard from '@/modules';
// 引入类型定义
import { TabsData, TabResponse } from '@/types/dashboard/index';
// 接口方法
const { getHomeTabsApi } = dashboard;
// 子组件导入
// 首页续费
import accountRenewal from './components/accountRenewal/index.vue';
// 快捷入口
import fastmenu from './components/fastmenu/index.vue';
// 统计
import statistics from './components/statistics/index.vue';
// 系统更新
import updateLog from './components/updateLog/index.vue';
// 推荐应用
import armlTab from './components/armlTab/index.vue';
// 轮播图--没内容暂时屏蔽
// import advertisement from './components/advertisement/index.vue';
// 帮助中心
import helpCenter from './components/helpCenter/index.vue';
import { getProvinceList } from '@/api/appv2/appv2';
// 定义 tabs 数据类型
const tabData = ref<TabsData>({
  systemUpdateTabs: [],
  armlTabs: [],
  tabList: [],
  tabs: [],
});

const fetchProvince = () => {
  getProvinceList().then((res) => {
    localStorage.setItem('provincelist', JSON.stringify(res.data));
  });
};
fetchProvince();

// 定义映射函数的类型
const mapTabsData = (data: TabResponse): TabsData => ({
  systemUpdateTabs: data.SYSTEM_UPDATE_TABS || [],
  armlTabs: data.ARMLTABS || [],
  tabList: data.TABLIST || [],
  tabs: data.TABS || [],
});

// 请求数据获取首页所有选项卡
onMounted(async () => {
  const { data } = await getHomeTabsApi();
  tabData.value = mapTabsData(data);
});
</script>

<style lang="scss" scoped src="./index.scss"></style>
